14 - The Dark Side of the Grid [ID:9485]
50 von 779 angezeigt

Hallo, erstmal vielen Dank, dass ich hier sein darf und vielen Dank, dass auch ihr

noch immer hier seid.

Ich hoffe, ihr habt noch ein paar Kraftreserven übrig.

Wie wir es gerade gehört haben, mein Name ist Manuel Matusowitsch und ich komme aus

Wien, aus dem sehr schönen Wien, wie man sehen kann.

Ja, all die Dinge, die ich eigentlich sagen wollte, jetzt sind alles schon gesagt worden.

Ich bin spezialisiert auf CSS und grundsätzlich auf Web-Standards, ht-mail, performance, solche

Dinge und ich schreibe auch ganz gerne Artikel über diese Themen oder halte Vorträge wie

diesen hier oder mache auch Workshops.

Das heißt, wenn jemand an einem Workshop interessiert ist, sehr gerne bin selbstständig.

Ich organisiere in Wien auch das Web-Clerks und das CodePen Meetup.

Das heißt, wenn ihr mal in Wien seid und zufällig läuft eines dieser Meetups, bitte kommt vorbei

und sagt Hallo und auf Twitter bin ich als mmatuso zu finden.

Heute bin ich hier, um über Grid zu sprechen, wie wir gerade gehört haben und ich werde

zu Beginn zeigen, wie umfangreich Grid ist und was für ein Segen Grid an sich schon ist.

Wer hier im Raum verwendet Grids denn schon?

Oder hat schon mal verwendet.

Okay, ein paar, aber noch nicht alle, das ist gut.

Das mache ich am Anfang und dann später werde ich zum Kern kommen zur dunklen Seite von Grid.

Also die Dinge, die vielleicht nicht so toll sind oder die Dinge, die wir als Entwickler

falsch machen können.

So, jetzt mal die Erklärung.

Grundsätzlich ist es ein Layout-System für zweidimensionale Layouts.

Das heißt, Grid eignet sich perfekt dann, wenn ich nicht nur auf der X-Achse oder auf

der Y-Achse arbeite, sondern auf beiden Achsen.

Dann, wenn es mehrdimensional wird.

Das besondere an Grid ist, dass es das erste richtige Layout-System in CSS ist.

Jetzt kann man sich vielleicht denken, na warte mal, CSS gibt es seit über 20 Jahren,

wie kann das sein?

Ich habe keinen Plan.

Also ich weiß es nicht, weil bis jetzt haben wir Float verwendet, Display Inline Block,

vielleicht sogar Display Table Cell oder ähnliches.

Natürlich, wir haben Flexbox, aber Flexbox eignet sich nur gut dann, wenn der Content

das Layout dominiert, beziehungsweise wenn wir auf einer Ebene arbeiten.

Aber sonst hatten wir nichts.

Ein paar traurige Seelen unter uns, einschließlich wir, haben mit HTML-Tables-Layouts gebaut.

Ja, das ging ganz gut.

Das war Grid ähnlich, aber wir wissen, dass das nicht gut ist.

Das Lustige ist, dass CSS Grid Layout irgendwie wie Table Layouts bauen ist.

Der große Unterschied ist nur, dass es in CSS passiert und nicht in HTML.

Das heißt, ich muss jetzt nicht HTML-Elemente hinzufügen, um ein Grid zu bauen, sondern

ich mache das in CSS.

Und natürlich, es ist sehr flexibel und responsive.

Das grundsätzliche Konzept eines Grids ist nichts Neues.

Das gab es immer schon.

Dementsprechend gab es auch sehr früh schon Pläne, Grids in den Browser zu bringen.

Und die Verantwortlichen oder die Erfinder von CSS tatsächlich wollten das schon sehr

früh machen und sie waren inspiriert durch Dinge, die Designer gemacht haben im Printmedium.

Das heißt, durch Magazine und Bücher, wo es einfach schon früh Grids gab.

Dementsprechend war es schon in den frühen 90ern so, dass man irgendwie es schaffen wollte,

Teil einer Videoserie :

Presenters

Manuel Matuzovic Manuel Matuzovic

Zugänglich über

Offener Zugang

Dauer

00:47:25 Min

Aufnahmedatum

2018-09-12

Hochgeladen am

2018-09-12 20:11:12

Sprache

de-DE

Die CSS Grid Layout Spezifikation ist eine der spannendsten Entwicklungen in CSS der letzten Jahre. Sie bringt eine Reihe neuer Eigenschaften, Einheiten, Funktionen und verwandter Spezifikationen mit sich, aber leider auch einige Gefahren.

In diesem Talk gibt Manuel Matuzovic eine kurze Einführung in CSS Grid Layout und stellt sich besagten Gefahren, indem er die Probleme erklärt und Alternativen vorstellt. Du wirst lernen, was es bei der Arbeit mit Grid zu beachten gibt, warum Source Order wichtig ist, wie man mit Legacy-Browsern umgeht und welche Vor- und Nachteile neue display-Werte haben.

Tags

Webdesign WKE WKE2018 Webentw A11Y grid codepen python template side placement webkongress cms
Einbetten
Wordpress FAU Plugin
iFrame
Teilen